<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        img {
            width: 100%;
            height: 500px;
        }

        .sr {
            width: 400px;
            height: 30px;
            background-color: black;
            margin-left: 37%;
            color: yellow;
        }

        .ai {
            width: 200px;
            height: 200px;
        }

        ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            list-style-type: none;
            margin-left: 50px;
            margin-right: 50px;
        }

        .ai {
            width: 200px;
            height: 200px;
        }

        p {
            margin-left: 60px;
        }

        .list {
            width: 100%;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
        }

        .aa {
            width: 200px;
            height: 200px;
            margin-top: 0px;
        }

        .app {
            display: none;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: black;
            margin: 0 auto;
        }

        .mtk {
            background-color: aliceblue;
            margin: 300px auto;
            height: 500px;
            width: 500px;
            border: 1px solid black;
        }
    </style>
</head>

<body style="background-color: rgb(36, 35, 35)">
    <div class="div1">
        <table>
            <thead>
                <tr>
                    <img src="../lib(1)/12.png" alt="" />
                </tr>
            </thead>
            <tbody>
                <tr>
                    <input type="text" class="sr" placeholder="输入要查找的英雄" />
                </tr>
            </tbody>
            <tfoot class="list"></tfoot>
        </table>
    </div>
</body>

</html>
<script src="../lib(1)/axios.min.js"></script>
<script>
    var sr = document.querySelector(".sr");
    function xr() {
        axios({
            url: "https://hmajax.itheima.net/api/lol/search",
            method: "GET",
        }).then((rec) => {
            const awd = rec.data.data;
            const kk = awd
                .map((item, index) => {
                    return `
        <ul>
            <li>
                <div>
                     <img class='ai' src='${item.icon}' alt=''>
                     <p>${item.name}</p>
                </div> 
            </li>
        </ul>           
        `;
                })
                .join("");
            document.querySelector("tfoot").innerHTML = kk;
        });
    }
    xr();
   
            // if (sr.value == "") {
            //     alert('内容不能为空')
            // }
    

   

</script>
